<?php
/**
 * @var \Mslynn\Live\Block\LivePageBlock $block
 *
 */
$video=$block->getVideo();
?>

<div class="prism-player" id="J_prismPlayer" style="height: 226px">
    <?php if( $block->getliveenable()): ?>
    <div class="liveIngBox">
        <img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/mLiveingImg.gif'); ?>">
        <span class="renshu">
                <img src=" <?php echo $this->getViewFileUrl('Mslynn_Live::images/glasses.png'); ?>">
                <span class="viewNumber"></span>
                View
            </span>
    <?php endif ?>

    </div>
    <div class="playbackVideoBox"  id="playbackVideoBox" style="display: none">
        <div class="startBox">
            <img src="<?php echo $this->getViewFileUrl('Mslynn_Live::images/start.png'); ?>">
        </div>
        <video src="" width="100%" height="100%" controlslist="nodownload noremoteplayback" disablepictureinpicture></video>
    </div>

</div>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-1 column">
        </div>
        <div class="col-md-6 column" style="padding-left: 0px">
            <div class="thumbnail">
                <!-- 品牌 -->
                <div class="brandStory" id="priceX">
                    <div class="brandLogo">
                        <a href="/">
                            <img src="<?php echo $block->getBrandStoryLogo() ?>">
                        </a>
                    </div>
                    <div class="brandText">
                        <span><?php echo $block->getBrandStoryDesc() ?></span>
                    </div>
                    <div class="brandLink">
                        <a href="/aboutus.html">more&gt;&gt;</a>
                    </div>
                </div>
                <!-- 倒计时 -->
           <!--       <div class="liveTime" style="display: block;">
                           <div class="soon-back">ANDY WILL BACK SOON</div>
                           <div class="timeBox">
                               <div class="daysBox">
                                   <span class="daysNum">00</span>
                                   <span class="days">days</span>
                               </div>
                               <div class="division">:</div>
                               <div class="hoursBox">
                                   <span class="hoursNum">18</span>
                                   <span class="hours">hours</span>
                               </div>
                               <div class="division">:</div>
                               <div class="minutesBox">
                                   <span class="minutesNum">57</span>
                                   <span class="minutes">minutes</span>
                               </div>
                               <div class="division">:</div>
                               <div class="secondsBox">
                                   <span class="secondsNum">45</span>
                                   <span class="seconds">seconds</span>
                               </div>
                           </div>
                       </div>-->
                <div class="caption" id="dialog" style="min-height:343px; max-height: 343px;">


                </div>
            </div>
            <!-- 商品列表 -->
            <div class="pricebox" style="bottom: 0px;">
                <div class="priceContent">
                    <div class="priceX">X</div>
                    <ul class="priceUl">
                        <?php $i = 1;
                        foreach ($block->getSkuProduct() as $k => $item): ?>
                            <li>
                                <div class="itemList">
                                    <!-- 索引 -->
                                    <div class="priceIndex">
                                        <span><?php echo $i++; ?></span>
                                    </div>
                                    <div class="itemImg">
                                        <img src="<?php echo $item['image']; ?>">
                                    </div>
                                    <div class="priceRight">

                                        <div class="itemText">
                                            <span class="itemHot">HOT</span>
                                            <span class="itemTextBox"> <?php echo $item['name']; ?></span>
                                        </div>
                                        <div class="itemPrice">
                                            <span style="color: #ff3797;">$<?php echo number_format( $item['price'],2); ?></span>
                                            <span style="text-decoration:line-through">$<?php echo number_format($item['total_price'],2); ?></span>
                                        </div>
                                        <div class="itemLink">
                                            <a href="<?php echo $item['url']; ?>">EXPLORE
                                                MORE</a>
                                        </div>

                                    </div>
                                </div>
                            </li>

                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
            <!-- 回放列表 -->
            <div class="playbackList" style="bottom: 0px;">
                <div class="playbackContent">
                    <div class="playbackX" id="playbackX">X</div>
                    <ul class="playbackUl">
                    <?php if (!empty($video)&&!$block->getliveenable()): ?>
                    <?php foreach ($video as $k=>$item): ?>
                        <li>
                            <div class="playbackDate">
                                <span class="playbackDay"><?php echo $item['time']; ?></span>
                            </div>
                            <div class="playbackTitle">
                              <?php echo $item['title'];  ?>
                            </div>
                            <div class="playbackText">
                                    <span class="playbackBtn">
                                        PLAYBACK
                                    </span>
                                <span class="playbackNum">
                                        <span class="viewNumber1"><?php echo $item['view'];?></span>
                                        VIEWED
                                    </span>
                            </div>
                            <div class="playbackListBox">
                                    <span class="start<?php echo  $k;?>  start1">
                                        <img src="<?php echo $block->getViewFileUrl('Mslynn_Live::images/start.png') ?>">
                                    </span>
                                <video src="<?php echo $item['video']; ?>"
                                       width="258px" height="170px" class="video1 video<?php echo $k;?>"></video>
                            </div>
                        </li>
                        <?php endforeach; endif ?>

                    </ul>
                </div>
            </div>
            <form class="subForm" onsubmit="onSubmit(); return false;">
                <select style="margin-bottom:8px" id="client_list">
                    <option value="all">所有人</option>
                </select>
                <div class="expression">
                    <input type="button" class="btn btn-default expressionBtn face pull-left" value="Expression">
                </div>
                <div class="commodityListBox"  id="priceBtn">
                    <div class="commodityListBox1"><?php echo  count($block->getSkuProduct()) ?></div>
                    <img src="<?php echo $block->getViewFileUrl('Mslynn_Live::images/1588900991.png') ?>">
                </div>
                <textarea placeholder="Ask a question for......" class="textarea thumbnail" id="textarea"
                          maxlength="12000"></textarea>
                <div class="subBox">

                    <img id="send" src=" <?php echo $block->getViewFileUrl('Mslynn_Live::images/subBtn.png') ?>">
                </div>
                <div class="playbackBox">
                        <span class="submitBtn" id="playbackBtn">
                            <img src="<?php echo $block->getViewFileUrl('Mslynn_Live::images/1594948416.png') ?>">
                        </span>
                </div>
                <div class="wrap">
                    <div class="position_zhan locatHide">
                        <img src="/img/1588904224.png "
                             class="foot_zhan clickZhan">
                        <span class="parentImg parentImg1">
                                <img src="/img/star.png"></span><span
                                class="parentImg parentImg1"><img src="/img/apple.png"></span><span
                                class="parentImg parentImg3"><img src="/img/star.png"></span><span
                                class="parentImg parentImg3"><img src="/img/watermelon.png"></span><span
                                class="parentImg parentImg6"><img src="/img/praise.png"></span><span
                                class="parentImg parentImg4"><img src="/img/heart.png"></span><span
                                class="parentImg parentImg5"><img src="/img/star.png"></span><span
                                class="parentImg parentImg6"><img src="/img/watermelon.png"></span><span
                                class="parentImg parentImg2"><img src="/img/watermelon.png"></span><span
                                class="parentImg parentImg6"><img src="/img/heart.png"></span><span
                                class="parentImg parentImg7"><img src="/img/apple.png"></span><span
                                class="parentImg parentImg7"><img src="/img/star.png"></span><span
                                class="parentImg parentImg3"><img src="/img/praise.png"></span><span
                                class="parentImg parentImg8"><img src="/img/heart.png"></span><span
                                class="parentImg parentImg0"><img src="/img/heart.png"></span><span
                                class="parentImg parentImg1"><img src="/img/apple.png"></span></div>
                </div>
            </form>

        </div>
    </div>
</div>
<?php

if ($block->getliveenable()){

?>
<script>

    require(['hls'], function (hls) {
        window.Hls = hls

        require(['aliplayer'], function (aliplayer) {
            var player = new Aliplayer({
                id: 'J_prismPlayer',
                width: '100%',
                height: '224px',
                videoWidth: '100%',
                autoplay: true,
                useH5Prism: true,
                language: "en-us",
                skinLayoutzz: false,
                //支持播放地址播放,此播放优先级最高
                //    source: 'https://video.ruiyuhair.cn/msln11.m3u8',
                source: '<?php  echo $block->getLiveUrl();?>',
                "skinLayout": [
                    {
                        "name": "bigPlayButton",
                        "align": "blabs",
                        "x": 30,
                        "y": 80
                    },
                    {
                        "name": "H5Loading",
                        "align": "cc"
                    },
                    {
                        "name": "errorDisplay",
                        "align": "tlabs",
                        "x": 0,
                        "y": 0
                    },
                    {
                        "name": "infoDisplay"
                    },
                    {
                        "name": "tooltip",
                        "align": "blabs",
                        "x": 0,
                        "y": 56
                    },
                    {
                        "name": "thumbnail"
                    },
                    {
                        "name": "controlBar",
                        "align": "blabs",
                        "x": 0,
                        "y": 0,
                        "children": [
                            {
                                "name": "progress",
                                "align": "blabs",
                                "x": 0,
                                "y": 44
                            },
                            {
                                "name": "playButton",
                                "align": "tl",
                                "x": 15,
                                "y": 12
                            },
                            {
                                "name": "timeDisplay",
                                "align": "tl",
                                "x": 10,
                                "y": 7
                            },
                            {
                                "name": "fullScreenButton",
                                "align": "tr",
                                "x": 10,
                                "y": 12
                            },
                            {
                                "name": "volume",
                                "align": "tr",
                                "x": 5,
                                "y": 10
                            }
                        ]
                    }
                ],

              <?php if($block->getliveenable()){?>
                isLive:true,
                <?php } ?>
            }, function (player) {
               // player.mute();
                player.play();
              //  palyer.setCover('https://video.ruiyuhair.cn/msln/msln.jpg')

            })
            player.on('autoplay', function (data) {
                if (data.paramData) //可以自动播放
                {
                 //   alert('可以自动播放')
                } else //不可以自动播放
                {
                    //alert('display')
                }

            });
            player.on('liveStreamStop', function () {
                console.log('切换')
                var newUrl = "https://video.ruiyuhair.cn/msln11.m3u8";
                //     player.loadByUrl(newUrl);
            });
            player.on('error', function () {
                console.log('错误事件')
            //    var newUrl = "https://video.ruiyuhair.cn/msln11.m3u8";
             //   player.loadByUrl(newUrl);
            });

            player.on('canplay', function (e) {
                console.log('canplay')
                player.play();
            });


        })
    })
</script>
<?php } else{?>
    <script>

        require(['jquery'],function ($){
            $(function() {
                $('#playbackVideoBox').show();
                $('.playbackVideoBox video').attr({
                    'src': '<?php echo  $block->getVideo1();?>',
                    'controls': true
                })
                // 点击播放键播放视频
                $('.startBox').click(function () {
                    $('.playbackVideoBox video')[0].play()
                    $('.startBox').hide()
                })

                <?php if (!empty($video)): ?>
                <?php foreach ($video as $k=>$item): ?>
                //点击列表1回放播放键
                $('.start<?php echo $k;?>').click(function () {
                    var src<?php echo $k;?> = $('.video<?php echo $k;?>').attr('src')
                    $('.playbackVideoBox video').attr('src', <?php echo $k;?>)
                    $('.playbackVideoBox video')[0].play()
                    $('.startBox').hide()
                })
              <?php endforeach; endif;?>


            })


            // 倒计时
            $('#dialog').css({
                'min-height': '35%',
                'max-height': '35%'
            })
            // 倒计时展示
            $('.liveTime').show()
            var timezone = 8; //目标时区时间，东八区
            var offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差，单位为分钟
            var nowDate = new Date().getTime(); // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数
            var targetDate = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000);
            // 北京时间

            // 倒计时
            function countDown(endTime) {




                var endTimes = new Date(endTime)
                var endTimestamp = endTimes.getTime()
                var startTimestamp = targetDate.getTime()
                var time = (endTimestamp - startTimestamp) / 1000;
                var d = parseInt(time / (24 * 60 * 60))
                var h = parseInt(time / (60 * 60) % 24);
                var minu = parseInt(time / 60 % 60)
                var sec = parseInt(time % 60)
                function addZero(i) {
                    return i < 10 ? "0" + i : i + "";
                }
                d = addZero(d)
                h = addZero(h)
                minu = addZero(minu)
                sec = addZero(sec)
                $('.daysNum').text(d);
                $('.hoursNum').text(h);
                $('.minutesNum').text(minu);
                $('.secondsNum').text(sec);
            }
            // 次日八点十分
            function nextDay() {
                var timeNow = new Date(targetDate)
                var week = timeNow.getDay()
                if (week == '6') {
                    timeNow = timeNow.setDate(timeNow.getDate() + 2);
                } else {
                    timeNow = timeNow.setDate(timeNow.getDate() + 1);
                }

                timeNow = new Date(timeNow)
                timeNow = timeNow.setHours(8)
                timeNow = new Date(timeNow)
                timeNow = timeNow.setMinutes(10)
                timeNow = new Date(timeNow)
                timeNow = timeNow.setSeconds(0)
                timeNow = new Date(timeNow)
                return timeNow
            }
            var next = nextDay()

            setInterval(() => {
                console.log(22131)
                countDown(next)
            }, 1000)

        })




    </script>

<?php } ?>
<script>

    /* require(["jquery",'swiper'],function($,Swiper) {
         var swiperText = new Swiper('.swiperText .swiper-container', {
             direction: 'vertical',
             loop: true,
             autoplay: 1000
         })
     })*/
</script>
<!-- 回放轮播 -->
<script>
    require(["jquery", 'swiper'], function ($, Swiper) {
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            slidesPerView: 2,
            observer: true,
            observeParents: true,
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        })
    })
</script>

<script>
    require(['jquery', 'socket'], function ($, io) {
        $("#priceBtn").click(() => {
            $('.pricebox').css('bottom', '380px')
        })
        $(".priceX").click(() => {
            $('.pricebox').css('bottom', '0px')
        })
        $("#priceX").click(() => {
            $('.pricebox').css('bottom', '0px')
        })
        $("#playbackBtn").click(() => {
            $('.playbackList').css('bottom', '380px')
        })
        $("#playbackX").click(() => {
            $('.playbackList').css('bottom', '0px')
        })


        var username = 'mslynnhair';
        var socket = io.connect('<?php echo $block->getSocket() ;?>');

        $(".emojiBtn").click(function () {
            $('.emojiContent').toggle()
        })

        $(document).keyup(function (e) {
            var key = e.which;
            if (key == 13) {
                var input = document.getElementById("textarea");

                socket.emit('sendMsg', {
                    msg: input.value,
                    color: 'red',
                    type: 'text'
                });
                input.value = ""

                return false;
            }
        });
        $('#send').click(function (e) {
            var input = document.getElementById("textarea");

            socket.emit('sendMsg', {
                msg: input.value,
                color: 'red',
                type: 'text'
            });
            input.value = ""

            return false;
        });
        socket.emit('login', {
            name: username,
        })
        // 登录成功，隐藏登录层
        socket.on('loginSuc', (data) => {
            console.log('登录成功')
            username = data.name

        })
        socket.on('loginError', () => {
            console.log('用户名已存在，请重新输入！')
        });
        // 接收消息
        socket.on('receiveMsg', (obj) => {
            console.log(obj)
            say(obj.name, obj.msg, obj.time)
        })


        // 发言
        function say(from_client_name, content, time, this_clinet_id = '1') {

            var face = {
                '[like]': '<img src="img/like.png" alt="" class="emojiCon"/>',
                '[100]': '<img src="img/100.png" alt="" class="emojiCon"/>',
                '[cry]': '<img src="img/cry.png" alt="" class="emojiCon"/>',
                '[Happy]': '<img src="img/Happy.png" alt="" class="emojiCon"/>',
                '[love]': '<img src="img/love.png" alt="" class="emojiCon"/>',
                '[Mask]': '<img src="img/Mask.png" alt="" class="emojiCon"/>',
                '[party]': '<img src="img/party.png" alt="" class="emojiCon"/>',
                '[RollOnesEyes]': '<img src="img/RollOnesEyes.png" alt="" class="emojiCon"/>',
                '[Stars]': '<img src="img/Stars.png" alt="" class="emojiCon"/>'
            } //完整的qq表情见本文末尾
            var reg = /\[.+?\]/g;

            content = content.replace(reg, function (a) {
                return face[a];
            });

            //解析url
            content = content.replace(/(http|https):\/\/[\S]+/gi, function (url) {
                if (url.indexOf(".sinaimg.cn/") < 0)
                    return "<a target='_blank' href='" + url + "'>" + url + "</a>";
                else
                    return url;
            });
            // 随机头像
            // var r= parseInt(Math.random()*(25-1)+1);
            if (username == from_client_name) {

                $("#dialog").append('<div class="speech_itemMy"><img src="./img/tx3.jpg" class="user_icon" /> ' + '<span>' + from_client_name + '</span>' + ' <br> ' + '<span>' + time + '</span>' + '<div style="clear:both;"></div><p class="triangle-isosceles top">' + content + '</p> </div>');
            } else {
                $("#dialog").append('<div class="speech_item"><img src="./img/tx2.jpg" class="user_icon" /> ' + from_client_name + ' <br> ' + time + '<div style="clear:both;"></div><p class="triangle-isosceles top">' + content + '</p> </div>');
            }

            $("#dialog").scrollTop($("#dialog")[0].scrollHeight);
        }


        // 系统提示消息
        socket.on('system', (user) => {

            console.log('system', user)

            say(user.name, user.name + '<span style="color:red">joined the studio<span>', user.time)
        });
        // 显示在线人员
        socket.on('disUser', (usersInfo) => {
            console.log('disUser', usersInfo)
            $(".viewNumber").html(usersInfo.length)
        });

        // 点击除自身隐藏
        $("body").click(function (e) {
            if (!$(e.target).closest(".emojiBtn").length) {
                $(".emojiContent").hide();
            }
        });

        $(function () {
            //点赞
            var timerZhan = null;

            var setIntervaZhan = function () {
                var timeout = Math.round(Math.random() * 1000 + 1000);
                clearTimeout(timerZhan);
                timerZhan = setTimeout(function timeoutFun() {
                    $(".clickZhan").click();
                    timeout = Math.round(Math.random() * 1000);
                    timerZhan = setTimeout(timeoutFun, timeout);
                }, timeout);
            };
            setIntervaZhan();
            $(".clickZhan").click(function (event) {
                if ($(this).parent().find(".parentImg").length > 15) {
                    $(this).parent().find(".parentImg").eq(0).remove();
                }

                var n = Math.floor(Math.random() * 10);
                var k = Math.floor(Math.random() * 10);
                if (k == 0 || k == 1) {
                    var src = "/img/apple.png"
                } else if (k == 2 || k == 3) {
                    var src = "/img/heart.png"
                } else if (k == 4 || k == 5) {
                    var src = "/img/star.png"
                } else if (k == 6 || k == 7) {
                    var src = "/img/watermelon.png"
                } else if (k == 8 || k == 9) {
                    var src = "/img/praise.png"
                }

                var str = '<span class="parentImg parentImg' + n + '"><img src="' + src + '"></span>';
                $(this).parent().append(str);

                var e = window.event || event;
                if (e.stopPropagation) { //如果提供了事件对象，则这是一个非IE浏览器
                    e.stopPropagation();
                } else {
                    window.event.cancelBubble = true;
                }
                return false;
            });

        })


    })


</script>

<script type="text/javascript">

    function imgBtn(e) {
        // 获取img标签的alt属性值
        var alt = e.getAttribute('alt')
        // 获取textarea输入框
        var input = document.getElementById("textarea");
        // 向输入框添加alt
        input.value += '[' + alt + ']'
    }

</script>
